<template>
  <el-table 
    :data="tableData" 
    style="width: 100%" 
    lazy 
    table-layout="auto"
    empty-text="回收站空空如也 ！">
    <el-table-column fixed prop="title" label="标题" />
    <el-table-column prop="articleImages" label="封面" width="120">
      <template #default="{ row }">
        <img :src="row.articleImages" alt="" style="width: 100%; height: auto;" />
      </template>
    </el-table-column>

    <el-table-column prop="articleExcerpt" label="主要内容" />
    <el-table-column prop="articleTags" label="标签" />
    <el-table-column prop="articleCategory" label="分类" />
    <el-table-column prop="articleUpdated" label="上次修改时间" sortable />

    <el-table-column fixed="right" label="操作">
      <template #default="{ row }">
        <el-button type="primary" size="small" @click="restoreButton(row.id)">恢复</el-button>
        <el-button type="danger" size="small" @click="deleteClick(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="centerDialogVisible" 
             :icon="icon-password"
             title="Warning" 
             width="30%" 
             align-center>
    <span class = "iconfont icon-jingshi"></span>
    <span>删除后不可恢复，是否确定删除？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</el-button>
        <el-button type="danger" @click="determineDeleteButton()">确认删除</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import axios from 'axios';
  import VueCookies from 'vue-cookies';
  import { onMounted, getCurrentInstance, ref } from 'vue';
  import { useRouter } from 'vue-router';

  const { proxy } = getCurrentInstance();
  const tableData = ref([]);
  const loginInfo = VueCookies.get('loginInfo');
  const account = loginInfo ? loginInfo.account : null; // 如果 loginInfo 存在，则从中取出 account 字段，否则返回 null
  const url = 'http://localhost:8081/api/recycleBinArticle';
  const centerDialogVisible = ref(false);
  const currentId = ref(null);


  const restoreButton = async (id) => {
    try {
      const data = {
        userAccount: account,
        articleId: id,
      };

      await axios
        .post('http://localhost:8081/api/restoreArticle', data)
        .then((response) => {
          if (response.data.code === 2000) {
            getArticle();
            proxy.$message.success('恢复成功');
          } else {
            proxy.$message.error(response.data.message);
          }
        })
        .catch((error) => {
          proxy.$message.error('恢复文章失败');
        });
    } catch (e) {
      proxy.$message.error('恢复文章失败');
    }
  };

  const deleteClick = (id) => {
    centerDialogVisible.value = true;
    currentId.value = id;
  };

  const determineDeleteButton = async () => {
    try {
      const data = {
        userAccount: account,
        articleId: currentId.value,
      };
      
      await axios
        .post('http://localhost:8081/api/physicallyDelete', data)
        .then((response) => {
          if (response.data.code === 2000) {
            getArticle();
            proxy.$message.success('删除成功');
            centerDialogVisible.value = false;
          } else {
            proxy.$message.error(response.data.message);
          }
        })
        .catch((error) => {
          proxy.$message.error('删除文章失败');
        });
    } catch (e) {
      proxy.$message.error('删除文章失败');
    }
    centerDialogVisible.value = false;
  };

  const getArticle = async () => {
    try {
      const data = {
        userAccount: account,
      };

      const res = await axios.post(url, data);

      if (res.data.code === 2000) {
        tableData.value = res.data.tableData;
      } else {
        proxy.$message.error('回收站为空!');
        tableData.value = [];
      }
    } catch (e) {
      proxy.$message.error('文章获取失败');
    }
  };

  onMounted(() => {
    getArticle();
  });
</script>
<style scoped>
.iconfont.icon-jingshi{
  color: crimson;
  font-size: x-large;
}
</style>
